<template>
  <el-container class="height100 domainHeader">
    <el-header class="obpm-header-t" ref="top1">
      <admin_header :desc="$t('system_monitoring')" @breadCrumbClick="breadCrumbClick"/>
    </el-header>
    <el-main>
      <el-main v-if="!swaggerVisible && !onlineUserVisible && !cpuVisible && !jamenVisible" >
        <div style="display: flex;justify-content: flex-end;"><el-button size="small" plain icon="el-icon-cpu" @click="cpuLog">服务器日志</el-button></div>
        <el-row justify="center" >
          <!-- <el-col :span="15"> -->
          <div class="allMoni" v-for="(item,index) in allServices" :key="index">
            <div class="moniTitle">{{$t('server_monitoring')}}（{{item.serviceId}}）</div>
            <div class="moniBody">
              <el-tooltip popper-class="moniTip" class="item" effect="light" :content="$t('druid_Monitor')" placement="bottom" :open-delay="1000">
                <div class="moniList" @click="druid(item)">
                  <div class="servicePng"><img src="@/assets/images/Druid Monitor.svg"></div>
                  <div class="serviceName">Druid Monitor</div>
                </div>
              </el-tooltip>
              <el-tooltip popper-class="moniTip" effect="light" :content="$t('jamon')" placement="bottom" :open-delay="1000">
                <div class="moniList" @click="jamen(item)">
                  <div class="servicePng"><img src="@/assets/images/Jamon.svg"></div>
                  <div class="serviceName">Jamon</div>
                </div>
              </el-tooltip>
              <el-tooltip popper-class="moniTip" effect="light" :content="$t('swagger2')" placement="bottom" :open-delay="1000">
                <div class="moniList" @click="swaggerEnter(item)">
                  <div class="servicePng"><img src="@/assets/images/Swagger2.svg"></div>
                  <div class="serviceName">Swagger2</div>
                </div>
              </el-tooltip>
              <el-tooltip popper-class="moniTip" effect="light" :content="$t('onlineUsers')" placement="bottom" :open-delay="1000">
                <div class="moniList" @click="onlineUserEnter(item)">
                  <div class="servicePng"><img src="@/assets/images/OnlineUsers.svg"></div>
                  <div class="serviceName">OnlineUsers</div>
                </div>
              </el-tooltip>
              <el-tooltip popper-class="moniTip" effect="light" :content="$t('server_monitoring')" placement="bottom" :open-delay="1000">
                <div class="moniList" @click="cpuEnter(item)">
                  <div class="servicePng"><img src="@/assets/images/cpu／heap／RAM.svg"></div>
                  <div class="serviceName">cpu/heap/RAM</div>
                </div>
              </el-tooltip>
            </div>
          </div>
          <!-- </el-col> -->
        </el-row>
      </el-main>
      <swagger v-if="swaggerVisible"  :currentService="currentService" @exit="onBackSystem" :height="height"/>
      <onlineUser v-if="onlineUserVisible" :currentService="currentService" @exit="onBackSystem"/>
      <cpu v-if="cpuVisible" :currentService="currentService" @exit="onCpuBack" :height="height"/>
      <jamenList v-if="jamenVisible" :currentService="currentService" @exit="onJamenBack" :height="height"/>
    </el-main>
    
    
  </el-container>
</template>

<script>
import admin_header from "@/components/admin_header.vue";

import swagger from "@/components/swagger.vue";
import onlineUser from "@/components/onlineUser.vue";
import cpu from "@/components/cpu.vue";
import jamenList from "@/components/jamenList.vue";

export default {
  components: {
    admin_header,
    swagger,
    onlineUser,
    cpu,
    jamenList,

  },
  data() {
    return {
      swaggerVisible:false,
      onlineUserVisible:false,
      cpuVisible:false,
      jamenVisible:false,
      height:0,
      allServices: [], //所有监控服务
      currentService:{}, //当前点击的监控服务
    };
  },
  created() {
    this.$api.getSystemMoniServices({
      onSucess: (resp) => {
        this.allServices = resp.data.data
      },
    });
  },
  mounted(){
    // var h = document.documentElement.clientHeight || document.body.clientHeight;
    // this.height=h-this.$refs.top1.$el.getClientRects()[0].height-this.$refs.top2.$el.getClientRects()[0].height;
    
  },
  methods: {
    // 服务器日志
    cpuLog() {
      let url = window.location.origin +managerContextPath + '/console/watchlog.html'
      window.open(url, '_blank');
    },
    breadCrumbClick(name){
      if(name==this.$t('system_monitoring')){
         this.onBackSystem()
      }
    },
    swaggerEnter(item){
      this.currentService = item
      // this.swaggerVisible=true;
      let routeData = this.$router.resolve({
        name: "swagger",
        query: {
          currentService:JSON.stringify(this.currentService),
        }
      });
      window.open(routeData.href, '_blank');
    },
    onlineUserEnter(item){
      this.currentService = item
      // this.onlineUserVisible=true;
      let routeData = this.$router.resolve({
        name: "onlineUser",
        query: {
          currentService:JSON.stringify(this.currentService),
        }
      });
      window.open(routeData.href, '_blank');
    },
    cpuEnter(item){
      this.currentService = item
      // this.cpuVisible=true;
      let routeData = this.$router.resolve({
        name: "cpu",
        query: {
          currentService:JSON.stringify(this.currentService),
        }
      });
      window.open(routeData.href, '_blank');

    },
    // onBack(){
    //   this.swaggerVisible=false;
    //   this.onlineUserVisible=false;
    // },
    onCpuBack(){
      this.cpuVisible=false;
    },
    druid(item){
      let contextPath = item.contextPath
      let port = item.port
      let host = item.host
      // let url = this.$api.getSystemUrl(`/core/monitor/druid/index.html?contextPath=${contextPath}&port=${port}&host=${host}`)
      let url = this.$api.getSystemUrl(`/monitor/${host}${contextPath}/${port}/core/monitor/druid/index.html`)
      // window.location.href=url;
      window.open(url,'_blank')

    },
    webServices(item){
      let contextPath = item.contextPath
      let port = item.port
      let host = item.host
      // let url = this.$api.getSystemUrl(`/servlet/AdminServlet?contextPath=${contextPath}&port=${port}&host=${host}`)
      let url = this.$api.getSystemUrl(`/monitor/${host}${contextPath}/${port}/servlet/AdminServlet`)
      window.location.href=url;

    },
    jamen(item){
      this.currentService = item
      // this.jamenVisible=true;
      let routeData = this.$router.resolve({
        name: "jamenList",
        query: {
          currentService:JSON.stringify(this.currentService),
        }
      });
      window.open(routeData.href, '_blank');

    },
    onJamenBack(){
      this.jamenVisible=false;
    },
    onBackSystem(){
      this.swaggerVisible=false;
      this.onlineUserVisible=false;
      this.cpuVisible=false;
      this.jamenVisible=false;

    }
  }
};
</script>

<style>
</style>